
 <template>
   <!--巡检记录进度-->
  <div class="app-container" v-dialog-drag>
    <el-dialog title="进度" :visible.sync="dialogVisible" align="center">
      <el-steps :active="activeStep" align-center>
        <el-step v-for="item in processList" :title="item.status_name" :description="item.created_at" :key="item.title">
           <template slot="description" >
                 <span>{{item.user_id}}<br/>{{item.created_at}}</span>
            </template>
        </el-step>
      </el-steps>
    </el-dialog>

  </div>
</template>

<script>
import { progre } from '@/api/maintain'

export default {
  name: 'inspectionTaskProcess',
  data() {
    return {
        dialogVisible: false,
        activeStep: 0,
        processList: [
        
          {
            title: '派单',
            status: 1,
            time: ''
        },{
            title: '接收',
            status: 2,
            time: ''
        },{
            title: '完成',
            status: 3,
            time: ''
        },{
            title: '确认',
            status: 4,
            time: ''
        },]
    }
  },
  methods: {
      // 打开弹窗
    open(row) {
     
      // 调接口，获取详细数据
      const data = {
        task_num: row.task_num
      }
      // 派单时间
      // this.processList[0].time=row.created_at
      progre(data).then(res => {
        //   debugger
       this.processList=res.data.list 
       this.processList.unshift(   {
            status_name: '已提交',
            status: 0,
            created_at:row.created_at,
            user_id:row.user_name
        })
         // 修改打开弹窗的变量为true，就可以打开弹窗了
      this.dialogVisible = true;
      // 设置进度
      let num=row.task_status+1
      this.activeStep =num;
       console.log('进度列表',this.processList)
      });
    }
  }
}

</script>

<style scoped>

</style>
